<template>
	<div class="order">
		<!-- 头部 -->
			<div class="nav_top d-flex jc-between ai-center bg-white">
			<div> 
				<el-button type="text" @click="$router.push('/shopCar')">
					<div class="iconfont icon-back ml-3 fs-xxxl text-dark"></div>
				</el-button>
			</div>
			<div class="fs-xxl text-dark">
				信息确认
			</div>
			<div>
				<el-button type="text" @click="$router.push('/')">
					<div class="iconfont icon-shouye mr-3 fs-xxxl text-dark"></div>
				</el-button>
			</div>
		</div>
		<!-- 地址 -->
		<div class="address bg-white py-2">
			<router-link :to="Object.keys(order.person).length != 0 ? '/addressList':'/addAddress'">
				<div class="d-flex px-3 py-3 jc-between">
					<div class="iconfont icon-location"></div>
					<div class="text-pink" v-if="Object.keys(order.person).length==0">修改收货人信息</div>
					<div v-if="Object.keys(order.person).length!=0">
						<div>{{order.person.contact}} {{order.person.phone}}</div>
						<div>{{order.person.address}} {{order.person.detail}}</div>
					</div>
					<div class="iconfont icon-right"></div> 
				</div>
			</router-link>
		</div>
		<!-- 订单信息 -->
		<div class="my-2">
			<!-- 付款方式 -->
			<div class="d-flex jc-between ai-center bg-white px-3 py-3 border-bottom">
				<div>付款方式</div>
				<div class="pay">在线支付</div>
			</div>
			<div class="d-flex jc-between ai-center bg-white px-3 py-3 border-bottom" @click="youhui">
				<div>优惠</div>
				<div class="d-flex"><div class="text-grey pr-3" v-if="orderList.payMount/100<49">没有可用的优惠券</div><div class="text-pink pr-3" v-if="orderList.payMount/100>49">满19包邮</div><div class="iconfont icon-right"></div></div>
			</div>
			<div class="d-flex jc-between ai-center bg-white py-3 border-bottom">
                   <van-field
                   v-model="order.remarks"
                   rows="3"
                   autosize
                   label="备注"
                   type="textarea"
                   maxlength="50"
                   placeholder="请输入备注"
                   show-word-limit
                   />
			</div>
		</div>
		<!-- 商品信息 -->
		<div class="bg-white px-3">
			<div class="py-3 border-bottom">天院旗舰店</div>
			<div class="d-flex border-bottom"  v-for="(item,i) in orderList.productList" :key="i">
				<div class="pr-2 py-2">
					<van-image
					style="width: 80px; height: 80px"
					:src="item.image"
					fit="cover">
				</van-image>
				</div>
				<div class="flex-1 py-2">
					<div>{{item.name}}</div><div class="text-grey">{{item.spec}}</div>
					<div class="d-flex jc-between pt-3 mt-3">
						<div class="fs-xl" style="font-weight: bold;">￥{{item.price/100}}</div>
						<div>×{{item.num}}</div>
					</div>
				</div>
				
			</div>
			<div class="border-bottom py-1 text-grey">
				<div class="d-flex jc-between py-1">
					<div>商品金额</div><div>￥{{orderList.payMount/100}}</div>
				</div>
				<div class="d-flex jc-between py-1">
					<div>运费</div><div class="d-flex"><div v-if="orderList.payMount/100<49">￥0.00</div><div v-if="orderList.payMount/100>=49">￥0.00</div></div>
				</div>
			</div>
			<div class="d-flex jc-between py-3 fs-xl border-top">
				<div>金额合计</div><div class="text-pink">￥{{TotalMount}}</div>
			</div>
		</div>
		<div class="px-2 py-2">
			<span class="text-grey">请在购买时严格阅读说明书，并按说明要求服用。如含有处方药，需要你提供执药师执政</span>
		</div>
		<!-- 底部 -->
		<div class="compute d-flex ai-center jc-between bg-white">
			<div class="flex-1"></div>
			<!-- 左侧 -->
			<div class="left d-flex ai-center jc-between width-100">
				<div class="text-pink fs-xxl pr-3">
					总计: ￥ {{TotalMount}}
				</div>
				<!-- 右侧按钮 -->
				<div class="right">
					<el-button type="danger" @click="orderSubmit">确认提交</el-button>
				</div>
			</div>
			
		</div>
	</div>
</template>

<script>
	import {Toast} from "mint-ui";
	export default {
		data(){
			return {
				url: '',
				order: {
					orderCount: '',//商品总件数 来自store
					person: {},//收货人信息
					money: 0,//商品总价格 来自store
					productIdList: [],//购物车中要删除商品的id
					remarks: '',
				},
				orderList: {},//订单显示的商品列表,
			}
		},
		computed: {
			TotalMount(){
				let Mount = this.orderList.payMount/100
				if (Mount>49) {
					Mount = Mount
				}else {
					Mount = Mount
				}
				return Mount
			}
		},
		methods: {
			youhui(){
				if (this.TotalMount <57) {
					Toast('没有匹配到可用的优惠券')
				}
				else {
					Toast('已为您匹配到可用的优惠券')
				}
				
			},
			//获取默认地址
			async getDefualtAddress(){

				if (JSON.stringify(this.$route.query) != '{}') {
					this.order.person = JSON.parse(this.$route.query.addressObj);
					console.log(this.order.person)
				}else{
					const res = await this.$http.get(`user/findAddressList.do`);
					if (res.data.code != 0) {
						res.data.forEach((item,i) => {
							if (item.isDefault == '1') {
								this.order.person = item
							}
						})
						
					}else {
						Toast('网络异常')
					}
					console.log(111)
				}



			},
			async getOrderList(){  //根据
				



				this.orderList = this.$store.getters.orderAffirm;
				
                this.orderList.productList.forEach((item,i) => {
                	this.order.orderCount += item.num
                })
                	
                
				this.order.money = this.orderList.payMount/100
				this.orderList.productList.forEach((item,i)=> {
					this.order.productIdList.push(item.skuId);
				})
				 

			},
			async orderSubmit() {

				
				if (this.orderList == null) {
					Toast("您没有任何商品！");
					return;
				}
				if (!this.order.person) {
					Toast("请求填写收货地址！");
					return;
				}
				
            //把订单数据提交给后台
            let submitOrder = {}
            submitOrder.buyerMessage = this.order.remarks;
            submitOrder.consignee = this.order.person.contact;
            submitOrder.consigneePhone = this.order.person.phone;
            submitOrder.consigneeAddress = this.order.person.address + this.order.person.detail;
            console.log(submitOrder)
			this.$store.commit('showLoading')
            const res = await this.$http.post(`order/submitOrder.do`,submitOrder)
            if (res.data.orderId) {
            	this.$store.commit('hideLoading')
            	this.$store.commit("removeOrderAffirm");
            	this.$store.commit('deleteCount',this.order.orderCount)
            	this.$router.push('/orderPay/'+res.data.orderId)
            }else{
            	Toast('服务器异常')
            }
            		//删除store选中的商品  和数据库中购物车对应的商品
            	// this.order.productIdList.forEach((item,i)=> {
            	// 	this.$http(`/api/cart/addCart.do?skuId=${item.skuId}&num=${-100}`).then(res => {
             //                // console.log(res)
            	// 	})
            	// })
            	
    		    
           
            
            
           //把该订单的数据保存到后台
           // const res = await this.$http.post('',this.order)
    	// if (res.code == "200") {
    	

    	// } else {
    	// 	Toast(result.message);
    	// }

    }
},
created(){
	this.getDefualtAddress();
	this.getOrderList();
},
		mounted() {   //在页面创建之前设置body的背景色
			document.querySelector('body').setAttribute('style', 'background:#f1f3f4;height: 100vh;')
		}, 
        beforeDestroy() {   //在页面销毁之前移除body的属性，目的是设置的颜色只对当前页面有效
        	document.querySelector('body').removeAttribute('style')
        },
    }
</script>

<style lang="scss" scoped>
.order {
	padding-bottom: 3.5rem
}
.compute {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 999;
	width: 100%;
	border-top: 1px solid #dedede;

}
	.address {
		
		background-color: #fff;

		
	}
	.pay {
		text-align: center;
		width: 80px;
		height: 25px;
		border: 1px solid #f92472;
		line-height: 25px;
		border-radius: 3%;
		color: #f92472;

	}
	input {
		padding-left: 20px;
		height: 50px;
		-webkit-box-flex: 1;
		-webkit-flex: 1 1 100%;
		-ms-flex: 1 1 100%;
		flex: 1 1 100%;
		border: 0;
		background: transparent;
		color: #333;
		font-size: 100%;
		text-indent: pxToRem(10px);
		outline: none;
	}

address {
	position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
    /* background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%); */
    background-size: 80px;
    content: '';
}
</style>